<template>

    <a-drawer
        :bodyStyle="{overflow: 'auto' }"
        :destroyOnClose="true"
        :title="title"
        :width="width"
        :visible="visible"
        :confirmLoading="confirmLoading"
        :maskClosable="true"
        :mask="true"
        :closable="true"
        @close="cancel"
      >
        
        <div class="table-page-search-wrapper">
      
            <a-tabs v-model="active">
                <a-tab-pane key="1" tab="页面设计">
                    <pageDesign :SysPage="SysPage" ref="pageDesign"></pageDesign>
                </a-tab-pane>
                <a-tab-pane key="2" tab="数据对象(data)">
                    <pageData ref="pageData" :SysPage="SysPage" ></pageData>
                </a-tab-pane>
                <a-tab-pane key="3" tab="页面方法(methods)">
                    <pageMethods ref="pageMethods" :SysPage="SysPage"></pageMethods>
                </a-tab-pane>
                <!-- <a-tab-pane key="5" tab="监听(watch)">
                    <pageWatch ref="pageWatch" :SysPage="SysPage"></pageWatch>
                </a-tab-pane> -->
                <!-- <a-tab-pane key="6" tab="计算属性(computed)">
                    <pageComputed ref="pageComputed" :SysPage="SysPage"></pageComputed>
                </a-tab-pane> -->
                <!-- <a-tab-pane key="10" tab="预览">
                    <pagePreview ref="pagePreview" :SysPage="SysPage"></pagePreview>
                </a-tab-pane> -->
            </a-tabs>
            
        </div>
   
        <div style="height:30px;"></div>
        <div class="drawer-bootom-button" v-if="isShowBootomButton">
            <a-button shape="round" @click="cancel" style="margin-right: .8rem">取消</a-button>
            <a-button  shape="round" @click="ok" type="primary" >提交</a-button>
        </div>
    </a-drawer>



    
</template>

<script>


import {SysMixin} from '@/mixins/SysMixin'
import defaultSettings from '@/config/defaultSettings'
import pageSetting from '@/components/lt/codeGenerator/pageSetting'
import pageDesign from './pageDesign'
import pageData from './pageData'
import pageMethods from './pageMethods'
import request from '@/utils/request'
import pageWatch from './pageWatch'
import pageComputed from './pageComputed'
import pagePreview from './pagePreview'
import Vue from 'vue'

export default {
    name:'pageEdit',
    components:{pageDesign,pageData,pageMethods,pageWatch,pageComputed,pagePreview},
    mixins:[SysMixin],
    props:{
       
      
    },
    data(){
        return{
            defaultSettings,
            visible:false,
            width:document.documentElement.clientWidth,
            model:'',
            confirmLoading:false,
            title:'',
            isShowBootomButton:true,
            //页面数据树
            pageData:{
                components:[],
                props:{},
                code:{
                    data:'',//数据对象
                    methods:'',//方法
                    watch:'',//监听
                    computed:'',//计算属性
          
                }
            },
            //画布数据
            echoData:{
                components:[],
                props:{},
                code:{
                    data:'',//数据对象
                    methods:'',//方法
                    watch:'',//监听
                    computed:'',//计算属性
                
                }
            },
            //页面数据
            SysPage:{},
            active:"1"
        }
    },

    methods:{
        
        edit (record) {
           
            this.SysPage={}
            this.visible = true
            this.active="1"
            if(!record['keyId']){
                this.SysPage["echoData"] = _.cloneDeep(this.echoData)
                this.SysPage["pageData"] = _.cloneDeep(this.pageData)
            }else{
                //  console.log(record.pageData)
                this.SysPage =  _.cloneDeep(record)
                // this.SysPage["echoData"] = JSON.parse(require('js-base64').Base64.decode(record["echoData"]))
                // this.SysPage["pageData"] = JSON.parse(require('js-base64').Base64.decode(record["pageData"]))
                Vue.set(this.SysPage,'echoData',JSON.parse(require('js-base64').Base64.decode(record["echoData"])))
                Vue.set(this.SysPage,'pageData',JSON.parse(require('js-base64').Base64.decode(record["pageData"])))
            }

            // console.log(this.SysPage.pageData)
         
        },
        ok(){
            let that = this
            that.$refs.pageDesign.checkPageProps()
            if(!that.$refs.pageDesign.isCanSave){
                return false
            }
            //画布组件是否为空
            let components = that.SysPage.echoData.components
            if(!components || components.length==0){
                this.$message.warning("页面组件为空")
                return false
            }
                
             //将画布数据拷贝给页面数据，然后开始对页面数据进行整理
            that.SysPage.pageData=that.getPageData(_.cloneDeep(that.SysPage.echoData))

            for (let key in that.SysPage.pageData.code) {
                that.SysPage.pageData.code[key] = that.SysPage.pageData.code[key].replace(/\n/g,' ').replace(/\t/g,' ').replace(/\r/g,' ')
            }
    
            that.SysPage.echoData = require('js-base64').Base64.encode(JSON.stringify(that.SysPage.echoData))
            that.SysPage.pageData = require('js-base64').Base64.encode(JSON.stringify(that.SysPage.pageData))
  
            that.confirmLoading=true
            request({url: '/SysPageController/save',method: 'post',data: that.SysPage}).then((res)=>{
                if(res.success){
     
                    that.close()
                    // setTimeout(() => {
                    //     that.edit(res.result)
                    // }, 500)
                    that.$message.success(res.message);
                }else{
                    that.$message.warning(res.message);
                }
            }).finally(() => {
                that.confirmLoading = false;
                
            }) 
       
        },
        cancel(){
            this.visible=false
            this.$emit('handleCancel');
        },
        close () {
            this.visible = false
            this.$emit('close')
        },
       
        emitChangeHandler(changeItem){
            
            this.$emit('handlerChange',changeItem);
        },
        emitClickHandler(field,form){
            this.$emit('handlerClick',field,form);
        },
        getForm(){
            return this.$refs.LForm.form
        },
        getPageData(echoData){
            delete echoData['dragIn']
            let components = echoData.components
            for(let i=0;i<components.length;i++){
                delete components[i]['dragIn']
                if(components[i]["type"]==pageSetting.常量.画布组件.标题){
                    components.splice(i, 1)
                    i--
                }else{
                    if(components[i]["components"]){
                        this.getPageData(components[i])
                    }
                }
            }
            return echoData
        },
       
    }

}
</script>
<style  scoped lang="less">
  .drawer-bootom-button {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 10px 16px;
    left: 0;
    text-align: right;
    border-top: 1px solid var(--component-border-color) !important;
    background: var(--drawer-header-background-color) !important;
    border-radius: 0 0 2px 2px;
    z-index: 999999;
  }

</style>

